<template>
  <div class="question">
    <div class="title">{{ title }}</div>
    <div class="question-dialog" v-if="success">
      <div class="success-wrap">
        <div class="success-word">选择继续挑战第{{ dialogTitle }}关</div>
        <div @click="goNext" class="qs-next"></div>
      </div>
    </div>
    <div class="question-dialog" v-if="over">
      <div class="over-wrap"></div>
    </div>

    <div class="question-dialog" v-if="fail">
      <div class="fail-wrap">
        <div class="fail-word">闯关失败，请查收相关知识解析</div>
        <div class="qs-show-answer" @click="showAnswer"></div>
        <div class="qs-again" @click="testAgain"></div>
      </div>
    </div>


    <div class="topic" v-if="!answerFlag">
      <div v-for="(item,index) of question" :key="index">
        <div v-if="index===now">
          <h2 class="topic-title"> 共{{ index + 1 }}/{{ question.length }}题
          </h2>
          <h3 class="topic-content">{{ index + 1 }}. {{ item.qs_content }}<span>（{{item.qs_type}}）</span></h3>

          <div v-if="item.qs_type === '单选题'">
            <el-radio-group v-model="ruleForm.resource[index]">
              <el-radio label="a" class="topic-option">a. {{ item.optiona }}</el-radio>
              <el-radio label="b" class="topic-option">b. {{ item.optionb }}</el-radio>
              <el-radio label="c" class="topic-option">c. {{ item.optionc }}</el-radio>
              <el-radio label="d" class="topic-option">d. {{ item.optiond }}</el-radio>
            </el-radio-group>

          </div>

          <div v-if="item.qs_type === '判断题'">
            <el-radio-group v-model="ruleForm.resource[index]">
              <el-radio label="正确" class="topic-option">正确</el-radio>
              <el-radio label="错误" class="topic-option">错误</el-radio>
            </el-radio-group>
          </div>

          <div v-show="item.qs_type === '多选题'">
            <el-checkbox-group
                @change="change"
                v-model="ruleForm.resource[index]"
            >
              <el-checkbox label="a" class="topic-option">a. {{ item.optiona }}</el-checkbox>
              <el-checkbox label="b" class="topic-option">b. {{ item.optionb }}</el-checkbox>
              <el-checkbox label="c" class="topic-option">c. {{ item.optionc }}</el-checkbox>
              <el-checkbox label="d" class="topic-option">d. {{ item.optiond }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>



    <div class="button-wrap" v-if="!answerFlag">
      <div class="qs-button" @click="pre" v-if="now!==0">上一题</div>
      <div class="qs-button" @click="next" v-if="now!==question.length-1">下一题</div>
      <div class="qs-button" @click="gogo">提交</div>
    </div>
    <div class="button-wrap" v-else>
      <div @click="testAgain" style="margin:0 auto" class="qs-button">重新答题</div>
    </div>
    <goBack/>
  </div>
</template>

<script>
import goBack from "@/views/goBack";
import axios from "axios";
// import { pinyin } from 'pinyin-pro';

export default {
  name: "question",
  components:{
    goBack
  },
  data() {
    return {
      ruleForm: {
        resource: [],				//每一道题的值
      },
      title: '',
      socketClient: null,
      index: 1000,
      timer: null,
      now: 0,
      dialogTitle: '二',
      rightResult: [],
      success: false,
      fail: false,
      answerFlag: false,
      over: false,
      question: [],
      level:1
    }
  },
  created() {
    this.setTitle()
    this.initData()

  },
  methods: {
    initData(){
      this.rightResult = []
      let type=this.$route.query.type
      // let type=pinyin(platformConfig.type, { toneType: 'none',type: 'array' }).join('')
      axios.get(platformConfig.url+'/appliedmodule/page',{
        params:{
          bizId:platformConfig.bizId,
          pageSize:999,
          pageNum:1,
          searchConditions:`qs_category=${type},level=${this.level}`,
          searchSource:2
        }
      }).then(({data})=>{
        let temp=data.data.records
        temp.forEach((item,index)=>{
          item.num=index
          this.rightResult.push(item.qs_right)
        })

        for (let i = 0; i < temp.length; i++) {
          //如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
          if (temp[i].qs_type==='多选题') {
            this.ruleForm.resource[i] = []
          } else {
            this.ruleForm.resource[i] = ''
          }
        }

        this.question=temp

      })

    },
    setTitle() {
      if (this.$route.name === 'one') {
        this.title = '第一关'
        this.level=1
      } else if (this.$route.name === 'two') {
        this.title = '第二关'
        this.level=2
      } else if (this.$route.name === 'three') {
        this.title = '第三关'
        this.level=3
      }
    },
    showAnswer() {
      this.fail = false
      this.answerFlag = true

    },
    testAgain() {
      this.$router.go(0)
    },

    goNext() {
      let name = this.$route.name
      let allStep = [
        {name: 'one', to: 'two'},
        {name: 'two', to: 'three'},
      ]
      let next = allStep.find(i => i.name === name)
      this.$router.push({name: next.to,query:{type:this.$route.query.type}})
    },
    gogo() {
      let right = JSON.stringify(this.rightResult)
      let userRight = []
      let userRightStr = ''
      for (let i of this.ruleForm.resource) {
        if (typeof i === 'string' && i) {
          userRight.push(i)
        } else if (Array.isArray(i) && i.length > 0) {
          userRight.push(i.sort().join(','))
        }
      }
      if (userRight.length !== this.rightResult.length) {
        this.$message.warning('请完成所有答卷再提交')
        return
      }

      console.log(userRight);

      userRightStr = JSON.stringify(userRight)
      if (right === userRightStr) {
        console.log('全对')

        if (this.$route.name === 'one') {
          this.success = true
          this.dialogTitle = '二'
        } else if (this.$route.name === 'two') {
          this.success = true
          this.dialogTitle = '三'
        } else if (this.$route.name === 'three') {
          this.over = true
          setTimeout(_=>{
            this.$router.push('/')
          },30000)
        }
      } else {
        this.fail = true
      }
    },
    change() {

    },
    next() {
      if (this.now < this.question.length) {
        this.now++
      }
    },
    pre() {
      if (this.now > 0) {
        this.now--
      }

    },


  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 8px;
}

// 滚动条滑槽样式
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

// 滚动条样式
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #ddd;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-thumb:active {
  background: #999;
}

// 浏览器失焦的样式
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(64, 158, 255, 0.4);
}

.question {
  width: 1920px;
  height: 1080px;
  position: relative;
  background: url("../assets/img/question/qsbg.jpg") no-repeat;
}

.title {
  margin: 0 auto;
  width: 1359px;
  height: 169px;
  text-align: center;
  line-height: 120px;
  color: #fff;
  font-size: 60px;
  font-weight: bold;
  background: url("../assets/img/question/title.png") no-repeat;
}

.topic {
  margin: 0 auto;
  width: 1469px;
  height: 727px;
  padding-top: 40px;
  padding-left: 85px;
  background-size: cover;

  background: url("../assets/img/question/topic.png") no-repeat;
}

.topic-title {
  font-weight: bold;
  font-size: 36px;
}

.topic-content {
  font-weight: bold;
  font-size: 30px;
  line-height: 50px;
  width: 80%;
  margin-top: 20px;
  border-bottom: 2px solid #1F1A1AFF;
}

.topic-option {
  font-weight: bold;
  font-size: 40px;
  padding-left: 15px;
  height: 80px;
  line-height: 70px;
  width: 1350px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  margin-top: 30px;
}

/deep/ .el-radio__label, /deep/ .el-checkbox__label {
  font-size: 30px;
}

/deep/ .el-radio__inner {
  width: 30px;
  height: 30px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #409eff;

  &::after {
    width: 15px;
    height: 15px;
  }
}

/deep/ .el-checkbox__inner {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #409eff;

  &::after {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: #fff;
    content: "";
    top: 22%;
    left: 23%;
    transition: transform .15s ease-in;

  }
}

.qs-button {
  width: 330px;
  height: 80px;
  font-size: 30px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border-radius: 80px;
  font-weight: bold;
  background-image: linear-gradient(to bottom, #61dcfa, #1265ca);

}

.button-wrap {
  width: 1000px;
  margin: 20px auto 0 auto;
  display: flex;
  justify-content: space-between;
}


.question-dialog {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.success-wrap, .over-wrap, .fail-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.success-wrap {
  width: 933px;
  height: 942px;
  background: url("../assets/img/question/success.png") no-repeat;
}

.success-word {
  color: #FCE628;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 376px;
  top: 486px;
}

.qs-next {
  cursor: pointer;
  left: 350px;
  top: 580px;
  width: 240px;
  height: 85px;
  position: absolute;
}

.over-wrap {
  width: 933px;
  height: 942px;
  background: url("../assets/img/question/over.png") no-repeat;
}

.fail-wrap {
  width: 675px;
  height: 763px;
  background: url("../assets/img/question/fail.png") no-repeat;
}

.fail-word {
  color: #FCE628;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 194px;
  top: 381px;
}

.qs-show-answer, .qs-again {
  top: 475px;
  width: 240px;
  height: 85px;
  position: absolute;
  cursor: pointer;
}

.qs-show-answer {
  left: 65px;
}

.qs-again {
  right: 65px;
}


</style>